<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广告轮播</title>
    <style type="text/css">
        #body{
            width:500px;
            height:280px;
            overflow: hidden;
            position:relative;
        }
        ul{
            position: absolute;
            float: left;
            list-style: none;
        }
        li{
            font-size: 10px;
            font-weight: bold;
            color: white;
            padding:5px;
            display: inline-block;
            background-color: #B2D0EF;
            border-radius: 50%;
        }
    </style>
    <script type="text/javascript">
        var timer;
        var index = 0;
        function showImg(){
            var a = document.getElementById("body").getElementsByTagName("a");
            var li = document.getElementById("ul").getElementsByTagName("li");
            a[index].style.display = "none";
            li[index].style.backgroundColor = "#B2D0EF";
            index++;
            index = index>=5 ? 0 : index;
            a[index].style.display = "block";
            li[index].style.backgroundColor = "red";
        }

        window.onload = function () {
            timer = window.setInterval("showImg()",1000);
        }

        function stopImg(){
            window.clearInterval(timer);
        }

        function continueImg(){
            timer = window.setInterval("showImg()",1000);
        }
    </script>
</head>
<body>
<div id="body" onmouseover="stopImg()" onmouseout="continueImg()">
    <a href="#"><img src="img/1.jpg"></a>
    <a href="#"><img src="img/2.jpg"></a>
    <a href="#"><img src="img/3.jpg"></a>
    <a href="#"><img src="img/4.jpg"></a>
    <a href="#"><img src="img/5.jpg"></a>
</div>
<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
</body>
</html>